<template>
  <el-dialog class="scene-coupon-dialog"
      :visible="dialogVisible" width="440px" custom-class="coupon-dialog" :show-close="false" :modal="true" top="0"  @closed="closed" :close-on-click-modal="false">
      <div slot="title" class="flex-header">
          <i class="el-icon-close" @click="closeDialog('cancel')"></i>
      </div>
      <div class="content" v-if="info">
          <div class="content-title">{{info.title}}</div>
          <div class="coupon-bg" v-if="info.detail && !info.detail.length">
            <div class="coupon-bg-left">
              <span class="coupon-bg-yang">￥</span>
              <span class="coupon-bg-money" v-if="info.detail.amount">{{ info.detail.amount|moneyParse }}</span>
            </div>
            <div  class="coupon-bg-right">
              <div class="coupon-bg-title">{{ info.detail.name }}</div>
              <div class="coupon-bg-time">
                <span v-if="info.detail.threshold">满{{ info.detail.threshold|moneyParse}}元可用</span>
                <span v-else>无门槛</span>
              </div>
            </div>
          </div>

          <div class="coupon-list-box" v-if="info.detail && info.detail.length">
            <div class="coupon-list-item" v-for="item in info.detail" :key="item.id">
              <div class="coupon-list-top">
                <span class="coupon-list-yang">￥</span>
                <span class="coupon-list-money" v-if="item.amount">{{ item.amount|moneyParse }}</span>
              </div>
              <div class="coupon-list-dec">
                <span v-if="item.threshold">满{{ item.threshold|moneyParse}}元可用</span>
                <span v-else>无门槛</span>
              </div>
            </div>
          </div>

          <div class="coupon-vip" v-if="info.right_list && info.right_list.length > 1">
            <div class="coupon-vip-title">{{info.right_slogan}}</div>
            <ul :class="{'right-flexbox':info.right_list.length<5}">
              <template v-for="(item, index) in info.right_list">
                <li v-if="(info.right_list.length>=5&&index<5)||(info.right_list.length<5&&index<3)" class="coupon-vip-item" :key="index">
                  <img :src="item.right_icon" class="coupon-vip-icon">
                  <span class="coupon-vip-text">{{ item.right_name }}</span>
                </li>
              </template>
              <li class="coupon-vip-item">
                <img src="@/assets/icon-more.svg" class="coupon-vip-icon">
                <span class="coupon-vip-text">更多...</span>
              </li>
            </ul>
          </div>
          <el-button class="coupon-btn" @click="useCoupon">立即使用</el-button>
          <div v-if="info.countdown" class="seckill_coutdown_span">
            <span>{{ timeSplit.hour }}:{{ timeSplit.minute }}:{{ timeSplit.second }}</span>
            后失效
          </div>
      </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    info: {
      default: () => ({}),
      type: Object
    },
    isPage: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dialogVisible: false,
      closeType: '',
      countdown: 0
      // info: null
    }
  },
  filters: {
    moneyParse (value) {
      return parseFloat((value / 100).toFixed(2))
    },
    timeParse (value) {
      var date = new Date(value * 1000)
      var Y = date.getFullYear() + '-'
      var M =
    (date.getMonth() + 1 < 10
      ? '0' + (date.getMonth() + 1)
      : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var h = date.getHours() + ':'
      var m = date.getMinutes() + ':'
      var s = date.getSeconds()
      return Y + M + D + h + m + s
    }
  },
  watch: {
    dialogVisible (val) {
      if (val) {
        this.startCountDown(60 * 60 * this.info.countdown)
      } else {
        clearTimeout(this.startCountDownTimer)
      }
    }
  },
  computed: {
    timeSplit () {
      const time = this.countdown
      return {
        day: parseInt(time / 86400),
        hour: parseInt(time % 86400 / 3600).toString().padStart(2, '0'),
        minute: parseInt(time % 86400 % 3600 / 60).toString().padStart(2, '0'),
        second: parseInt(time % 86400 % 3600 % 60).toString().padStart(2, '0')
      }
    }
  },
  methods: {
    closeDialog (type) {
      if (this.isPage) {
        // #un 关闭窗口
      } else {
        this.dialogVisible = false
        this.closeType = type
      }
    },
    async useCoupon () {
      if (this.isPage) {
        this.$gotoMember()
      }
      this.closeDialog('success')
    },
    closed () {
      if (this.closeType === 'cancel' || this.closeType === '') {
        this.cancel && this.cancel()
      } else {
        this.confirm && this.confirm()
      }
    },
    startCountDown (time) {
      if (this.startCountDownTimer) clearTimeout(this.startCountDownTimer)
      time = time - 1
      if (time <= 0) {
        this.closeDialog('cancel')
        return
      }
      this.countdown = time
      this.startCountDownTimer = setTimeout(() => this.startCountDown(time), 1000)
    }
  },
  mounted () {
    this.dialogVisible = this.isPage
  }
}
</script>
<style  lang="scss" scoped>
.el-dialog__wrapper.scene-coupon-dialog{
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  transform: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  /deep/ .el-dialog{
    background: linear-gradient( 180deg, #FFEAEA 0%, #FFFFFF 100%);
    border-radius: 8px;
    border:none;
    &.is-fullscreen {
      border-radius: 0 !important;
    }
  }
  /deep/ .el-dialog__body{
    padding:0 20px 30px;
  }
  .flex-header{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .el-icon-close{
      color:#333;
      font-size:20px;
      cursor: pointer;
      user-select: none;
    }
  }
  .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:10px;
    .content-title{
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: bold;
      font-size: 17px;
      color: #7B4801;
    }

    .coupon-bg{
      width:340px;
      height:100px;
      background:url('~@/assets/coupon-bg.svg') no-repeat center/contain;
      display: flex;
      margin-bottom: 10px;
      .coupon-bg-left{
        width:35%;
        display: flex;
        align-items: center;
        justify-content: center;
        .coupon-bg-yang{
          font-weight: 500;
          font-size: 20px;
          color: #9F760F;
          margin-top: 10px;
        }
        .coupon-bg-money{
          font-weight: bold;
          font-size: 34px;
          color: #9F760F;
        }
      }
      .coupon-bg-right{
        width:65%;
        .coupon-bg-title{
          font-weight: bold;
          font-size: 16px;
          color: #FCE5B8;
          margin:28px 0 5px 20px;
        }
        .coupon-bg-time{
          font-weight: 400;
          font-size: 12px;
          color: #FCE5B8;
          margin:0 0 0 20px;
        }
      }
    }

    .coupon-list-box {
      width: 362px;
      height: 150px;
      background: linear-gradient( 169deg, #FF8D6A 0%, #FE4848 100%);
      box-shadow: -10px 0px 30px 0px rgba(222,32,32,0.2);
      border-radius: 20px;
      display: flex;
      margin-bottom: 10px;
      justify-content: center;
      gap:6px;
      align-items: center;
      color: #F15855;
      .coupon-list-item {
        width: 110px;
        height: 130px;
        background:url('~@/assets/coupon-item-bg.svg') no-repeat center/contain;
        border-radius: 16px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
      }
      .coupon-list-top {
        margin-top: 20px;
      }
      .coupon-list-yang {
        font-size: 20px;
      }
      .coupon-list-money {
        font-size: 40px;
      }
      .coupon-list-dec {
        font-size: 12px;
        height: 42px;
        line-height: 42px;
        width: 90px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-top: 1px dashed #F15855;
      }
    }

    .coupon-vip{
      .coupon-vip-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #7B4801;
        font-size: 14px;
        width: 320px;
        margin: 0 auto 10px;
        &::before {
          content: ' ';
          width: 90px;
          height: 1px;
          background: linear-gradient(90deg, rgba(123,72,1,0) 0%, #7B4801 100%);
        }
        &::after {
          content: ' ';
          width: 90px;
          height: 1px;
          background: linear-gradient( 90deg, #7B4801 0%, rgba(123,72,1,0) 100%);
        }
      }
      ul {
        width: 368px;
        overflow: hidden;
        .coupon-vip-item {
          float: left;
          display: flex;
          align-items: center;
          width: 120px;
          margin: 0 4px 10px 0;
          &:nth-child(3n) {
            margin-right: 0;
          }
        }
        .coupon-vip-icon {
          width: 20px;
          height: 20px;
          margin-right: 6px;
        }
        .coupon-vip-text {
          color: #A87701;
          font-size: 12px;
          display: inline-block;
          width: 90px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        &.right-flexbox {
          display: flex;
          width: 314px;
          justify-content: space-between;
          margin-bottom: 10px;
          .coupon-vip-item {
            float: none;
            text-align: center;
            width: 56px;
            margin: 0;
            display: inline-block;
            position: relative;
            &::before {
              content: ' ';
              width: 50px;
              height: 50px;
              background: linear-gradient( 180deg, #FFF2D2 0%, #F8DD99 100%);
              border-radius: 50%;
              position: absolute;
              z-index: -1;
              top: 0;
              margin: 0 auto;
            }
          }
          .coupon-vip-icon {
            width: 36px;
            height: 36px;
            margin: 7px;
            position: relative;
          }
          .coupon-vip-text {
            width: 100%;
            white-space: normal;
            margin-top: 5px;
          }
        }
      }
    }
    .coupon-btn{
      width: 260px;
      height: 49px;
      background: #303E5F;
      border-radius: 35px 35px 35px 35px;
      border-radius: 32px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 16px;
      color: #FFFFFF;
      &:hover{
        background: #1B2B51;
      }
    }
  }
  .seckill_coutdown_span {
    display: flex;
    font-size: 16px;
    height: 18px;
    color: #333333;
    span {
      display: inline-block;
      margin-right: 4px;
    }
  }
}
</style>
